<template>
  <div class="container">
    <div class="swiper">
      <swiper :list="demo03_list" auto style="margin:0 auto;" height="180px" dots-position="center"></swiper>
    </div>
    <p class="title">常用服务项目</p>
    <div class="service_item">
      <flexbox :gutter="0">
        <flexbox-item><router-link to="/order_details"><div class="flex-demo">1</div></router-link></flexbox-item>
        <flexbox-item><router-link to="/login"><div class="flex-demo">2</div></router-link></flexbox-item>
      </flexbox>
      <flexbox :gutter="0">
        <flexbox-item><div class="flex-demo">1</div></flexbox-item>
        <flexbox-item><div class="flex-demo">2</div></flexbox-item>
      </flexbox>
      <flexbox :gutter="0">
        <flexbox-item><div class="flex-demo">1</div></flexbox-item>
        <flexbox-item><div class="flex-demo">2</div></flexbox-item>
      </flexbox>
      <flexbox :gutter="0">
        <flexbox-item><div class="flex-demo">1</div></flexbox-item>
        <flexbox-item><div class="flex-demo">2</div></flexbox-item>
      </flexbox>
      <flexbox :gutter="0">
        <flexbox-item><div class="flex-demo">1</div></flexbox-item>
        <flexbox-item><div class="flex-demo">2</div></flexbox-item>
      </flexbox>
    </div>
  </div>
</template>

<script>
  import {  Flexbox, FlexboxItem,Swiper, GroupTitle, SwiperItem, XButton, Divider } from 'vux'
  const imgList = [
    'http://placeholder.qiniudn.com/800x300/FF3B3B/ffffff',
    'http://placeholder.qiniudn.com/800x300/FFEF7D/ffffff',
    'http://placeholder.qiniudn.com/800x300/8AEEB1/ffffff'
  ]
  const demoList = imgList.map((one, index) => ({
    url: 'javascript:',
    img: one
  }))
    export default {
      data () {
        return {
          demo03_list: demoList,
        }
      },
      mounted(){
        this.$emit("titlename","协航健康")
      },
      components: {
        Flexbox,
        FlexboxItem,
        Divider,
        Swiper,
        SwiperItem,
        GroupTitle,
        XButton,
        Divider
      },
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .title{
    font-size: 15px;
    margin: 18px 0px 18px 10px;
    font-weight: bold;
  }
  .service_item{
    width: 95%;
    margin: 0 auto;
  }
  .flex-demo{
    height: 70px;
    margin: 0 0 5px 5px;
    background-color: white;
  }
</style>
